//index.js
//获取应用实例
const app = getApp()

let itemList = [{
  id: 1,
  type:"img",
  image: '1.png', //图片地址
  shape: "round", // 形状 round 原型
  top: 100, //初始图片的位置 
  left: 100,
  x: 155, //初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
  y: 155,
  scale: 1, //缩放比例  1为不缩放
  angle: 0, //旋转角度
  active: false ,//判定点击状态,
  new_rotate:0,
  rotate: 0,
  width: 0,
  height: 0,
}, {
  id: 2,
  type: "img",
  image: '2.png',
  top: 50,
  left: 50,
  x: 155,
  y: 155,
  scale: 1,
  angle: 0,
  active: false,
  new_rotate: 0,
    rotate:0,
    width:0,
    height:0,
  }, {
    id: 3,
    type: "text",
    image: '2.png',
    top: 50,
    left: 50,
    x: 155,
    y: 155,
    scale: 1,
    angle: 0,
    active: false,
    new_rotate: 0,
    rotate: 0,
    width: 0,
    height: 0,
  }]
var items = [];
var index = 0;
var windowWidth = 750;

Page({
  data: {
    image_close: "",
    image_move: '',
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    allList: itemList,
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function() {
    items = this.data.allList;
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  /**
         * 删除组件
         */
  onDel() {

  },
  /**
   * 移动组件函数 start
   */
  moveStart(e) {
    console.log(11111)
    for (let i = 0; i < items.length; i++) {  //旋转数据找到点击的
      items[i].active = false;
      if (e.currentTarget.dataset.id == items[i].id) {
        index = i;   //记录下标
        items[index].active = true;  //开启点击属性
      }
    }

    items[index].lx = e.touches[0].clientX;  // 记录点击时的坐标值
    items[index].ly = e.touches[0].clientY;
    this.setData({   //赋值 
      allList: items
    })
  },
  onMove(e) {
    //移动时的坐标值也写图片的属性里
    items[index]._lx = e.touches[0].clientX;
    items[index]._ly = e.touches[0].clientY;

    //追加改动值
    items[index].left += items[index]._lx - items[index].lx;  // x方向
    items[index].top += items[index]._ly - items[index].ly;    // y方向
    items[index].x += items[index]._lx - items[index].lx;
    items[index].y += items[index]._ly - items[index].ly;

    //把新的值赋给老的值
    items[index].lx = e.touches[0].clientX;
    items[index].ly = e.touches[0].clientY;
    this.setData({//赋值就移动了
      allList: items
    })
  },
  //获取数据移动前的角度
  countDeg(cx, cy, pointer_x, pointer_y) {
    var ox = pointer_x - cx;
    var oy = pointer_y - cy;
    var to = Math.abs(ox / oy);
    console.log(ox)
    console.log(oy)
    console.log(to)
    var angle = Math.atan(to) / (2 * Math.PI) * 360;//鼠标相对于旋转中心的角度
    console.log("ox.oy:", ox, oy)
    if (ox < 0 && oy < 0)//相对在左上角，第四象限，js中坐标系是从左上角开始的，这里的象限是正常坐标系  
    {
      angle = -angle;
    } else if (ox <= 0 && oy >= 0)//左下角,3象限  
    {
      angle = -(180 - angle)
    } else if (ox > 0 && oy < 0)//右上角，1象限  
    {
      angle = angle;
    } else if (ox > 0 && oy > 0)//右下角，2象限  
    {
      angle = 180 - angle;
    }
    console.log(angle);
    return angle;
  },
  //计算触摸点到圆心的距离

  getDistancs(cx, cy, pointer_x, pointer_y) {
    var ox = pointer_x - cx;
    var oy = pointer_y - cy;
    return Math.sqrt(
      ox * ox + oy * oy
    );
  },//旋转放大缩小事件

  // 触摸开始事件  items是this.data.itemList的全局变量，便于赋值  所有的值都应给到对应的对象里
  touchStart: function (e) {
    //找到点击的那个图片对象，并记录
    for (let i = 0; i < items.length; i++) {
      items[i].active = false;

      if (e.currentTarget.dataset.id == items[i].id) {
        console.log('e.currentTarget.dataset.id', e.currentTarget.dataset.id)
        index = i;
        console.log(items[index])
        items[index].active = true;
      }
    }
    //获取作为移动前角度的坐标
    items[index].tx = e.touches[0].clientX;
    items[index].ty = e.touches[0].clientY;
    //移动前的角度
    items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)
    //获取图片半径
    items[index].r = this.getDistancs(items[index].x, items[index].y, items[index].left, items[index].top)
  },
  // 触摸移动事件  
  touchMove: function (e) {
    //记录移动后的位置
    items[index]._tx = e.touches[0].clientX;
    items[index]._ty = e.touches[0].clientY;
    //移动的点到圆心的距离  * 因为圆心的坐标是相对与父元素定位的 ，所有要减去父元素的OffsetLeft和OffsetTop来计算移动的点到圆心的距离
    items[index].disPtoO = this.getDistancs(items[index].x, items[index].y, items[index]._tx - windowWidth * 0.125, items[index]._ty - 10)

    items[index].scale = items[index].disPtoO / items[index].r; //手指滑动的点到圆心的距离与半径的比值作为图片的放大比例
    items[index].oScale = 1 / items[index].scale;//图片放大响应的右下角按钮同比缩小

    //移动后位置的角度
    items[index].angleNext = this.countDeg(items[index].x, items[index].y, items[index]._tx, items[index]._ty)
    //角度差
    items[index].new_rotate = items[index].angleNext - items[index].anglePre;

    //叠加的角度差
    items[index].rotate += items[index].new_rotate;
    items[index].angle = items[index].rotate; //赋值

    // //计算移动后的宽高
    // items[index].width += (items[index]._tx - items[index].tx);
    // items[index].height += (items[index]._ty - items[index].ty);

    //用过移动后的坐标赋值为移动前坐标
    items[index].tx = e.touches[0].clientX;
    items[index].ty = e.touches[0].clientY;
    items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)

    console.log(items);

    //赋值setData渲染
    this.setData({
      allList: items
    })
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})